<template>
  <div class="home">
    <div class="flex-column flex-item" style="padding: 10px; overflow: hidden">
      <div class="flex-item" style="height: 50%; margin-bottom: 10px">
        <HomeCard icon="el-icon-chat-line-square" title="待办事项" :badge="myTotal">
          <template #header-right>
            <div class="more" @click="$router.push('/workToDo')">更多<i class="el-icon-arrow-right"></i></div>
          </template>
          <template #default>
            <PageableTable ref="todoList" hide-on-single-page :paging="false" :api="getList" :selection="false">
              <TableColumn label="状态" prop="processStatusName" width="60" align="center" />
              <TableColumn label="流程标题" clickable prop="formName" :cell-click="onRowClick" />
              <TableColumn label="环节名称" prop="name" />
              <TableColumn label="提交人" prop="startPersonName" />
              <TableColumn label="提交时间" prop="startTime" />
              <TableColumn label="总耗时" prop="totalTime" />
              <TableColumn label="所属系统" prop="appName" />
            </PageableTable>
          </template>
        </HomeCard>
      </div>
      <div class="flex-item" style="height: 50%">
        <HomeCard icon="el-icon-chat-line-square" title="系统消息" :badge="systemTotal">
          <template #header-right>
            <div class="more" @click="$router.push('/systemMessage')">更多<i class="el-icon-arrow-right"></i></div>
          </template>
          <template #default>
            <PageableTable
              hide-on-single-page
              :api="getList2"
              :dic-options="[
                {
                  prop: 'status',
                  dicData: [
                    { label: '未读', value: 0 },
                    { label: '已读', value: 1 }
                  ]
                },
                {
                  prop: 'typeCode',
                  dicData: [
                    { label: '内部跳转', value: 'N' },
                    { label: '外部跳转', value: 'Y' }
                  ]
                }
              ]"
              :paging="false"
              :selection="false">
              <TableColumn label="状态" prop="status" width="60" align="center" />
              <TableColumn label="内容" prop="content" />
              <TableColumn label="描述" prop="remarks" />
              <TableColumn label="类型编码" prop="typeCode" />
              <TableColumn label="创建人" prop="createdBy" />
              <TableColumn label="创建时间" prop="createdTime" />
            </PageableTable>
          </template>
        </HomeCard>
      </div>
    </div>
    <div class="flex-column flex-not-shrink" style="width: 33vw; padding: 10px 10px 10px 0">
      <div class="flex-item">
        <HomeCard icon="el-icon-chat-line-square" title="通知公告" :badge="noticeTotal">
          <template #header-right>
            <div class="more" @click="$router.push('/admin/bulletin/bulletin')">
              更多<i class="el-icon-arrow-right"></i>
            </div>
          </template>
          <template #default>
            <PageableTable hide-on-single-page :api="getList3" :paging="false" :selection="false">
              <TableColumn label="状态" prop="curUserReadCount" width="70" align="center">
                <template #default="{ row }">
                  <ElTag>{{ row.curUserReadCount === 0 ? '未读' : '已读' }}</ElTag>
                </template>
              </TableColumn>
              <TableColumn label="业务类别" prop="typeCode" width="80" />
              <TableColumn label="标题" prop="subject" clickable :cell-click="onBulletinRowClick" />
              <TableColumn label="发布时间" prop="pushTime" width="90">
                <template #default="{ row }">
                  {{ $formatDate(row.pushTime) }}
                </template>
              </TableColumn>
              <TableColumn label="发布用户" prop="pushUserName" width="80" />
            </PageableTable>
          </template>
        </HomeCard>
      </div>
    </div>
  </div>
</template>

<script>
  import HomeCard from '@/views/module/home/HomeCard'
  import { mapState } from 'vuex'
  import { getAppingTasksPagerModel } from '@/api/admin/workitem'
  import { genPageResponse } from '@/util/response'
  import { systemMessagePage } from '@/api/message/systemmessagerecord'
  import { getBulletinList } from '@/api/admin/bulletin'

  export default {
    name: 'CommonUserHome',
    bus: {
      refreshHome(viewId) {
        if (viewId === 'WorkToDoList') {
          this.$refs.todoList.reload()
        }
      }
    },
    components: {
      HomeCard
    },
    data() {
      return {
        myTotal: 0,
        systemTotal: 0,
        noticeTotal: 0
      }
    },
    computed: {
      ...mapState('logs', ['logsList']),
      ...mapState('user', {
        userId: state => state.sysUser.userId
      })
    },
    methods: {
      async getList(page) {
        const res = await getAppingTasksPagerModel({
          entity: {},
          query: { pageNum: page.current, pageSize: page.size }
        })
        return {
          data: genPageResponse(res.data.data.rows)
        }
      },
      getList2(page) {
        return systemMessagePage({
          current: page.current,
          size: page.size,
          createdId: this.userId,
          status: 0
        })
      },
      async getList3(page) {
        const res = await getBulletinList()
        const data = res.data.data
        const total = data.length
        if (total <= 25) {
          return {
            data: genPageResponse(data)
          }
        } else {
          const currentPage = page.current
          const pageSize = page.size
          this.list = this.logsList.slice((currentPage - 1) * pageSize, currentPage * pageSize)
          return {
            data: genPageResponse(data.slice((currentPage - 1) * pageSize, currentPage * pageSize), total)
          }
        }
      },
      onRowClick(row) {
        if (this.$isBlank(row.formUrl) || this.$isBlank(row.formId)) {
          this.$message.warning('未配置业务跳转url请求地址')
          return
        }
        this.$router.push({ path: row.formUrl.replace(':id', row.formId), query: { taskId: row.taskId } })
      },
      onBulletinRowClick(row) {
        this.$router.push({ path: `/admin/bulletin/bulletinForm/${row.id}` })
      }
    }
  }
</script>
